<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 512px;
            height: 512px;
            border: 1px solid gray;
        }
    </style>

    <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>

    <script src="../../lib/OpenLayers.js"></script>
    <script type="text/javascript">
 
        // make map available for easy debugging
        var map;

        // increase reload attempts 
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;

        function init(){
            var options = {
                projection: "EPSG:900913",
                units: "m",
                maxResolution: 156543.0339,
                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
                                                 20037508, 20037508.34)
            };
            map = new OpenLayers.Map('map', options);

            // create Virtual Earth layers
            var veroad = new OpenLayers.Layer.VirtualEarth(
                "Virtual Earth Raods",
                {'type': VEMapStyle.Road, 'sphericalMercator': true}
            ); 

            // create WMS layer
            var wms = new OpenLayers.Layer.WMS(
                "World Map",
                "http://world.freemap.in/tiles/",
                {'layers': 'factbook-overlay', 'format':'png'},
                {
                    'opacity': 0.4,
                    'isBaseLayer': false,'wrapDateLine': true
                }
            );

            map.addLayers([veroad, wms]);
            map.zoomToMaxExtent()
        }

        
    </script>
  </head>
  <body onload="init()">
    <h3>VE Opacity</h3>
    <p>The overlay should have an opacity of 40%.</p>  
    <div id="map"></div>
  </body>
</html>
